<template>
  <el-card style="overflow-y: auto;">
    <table-filters @search="loadTableData" ref="filtersRef"></table-filters>
    <el-table :data="originData.tableData" border style="width: 99%" v-loading="originData.loading">
      <el-table-column prop="name" label="客户姓名" width="180" align="center" />
      <el-table-column prop="putTel" label="联系电话" width="180" align="center" />
      <el-table-column prop="date" label="交付日期" width="180" align="center" />
      <el-table-column prop="productType" label="设备类型" width="180" align="center" />
      <el-table-column prop="detail" label="详情" align="left" />
    </el-table>
    <el-pagination
      layout="prev, pager, next"
      :total="originData.total"
      v-model:current-page="originData.pageNo"
      @current-change="currentChange"
    ></el-pagination>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'table-demo'
})
</script>

<script lang="ts" setup>
import tableFilters from "./modules/filters.vue";
import { onMounted, reactive, ref } from "vue";
import { get_guest_list } from "@/api/table";

let filtersRef = ref();

let originData = reactive({
  tableData: [],
  loading: false,
  total: 0,
  pageNo: 1,
});

// 加载表格数据
let loadTableData = (params: Object) => {
  originData.loading = true
  // 构造参数
  params = {
    ...params,
    pageNo: originData.pageNo,
  }
  get_guest_list(params).then((res: any) => {
    originData.tableData = res.record;
    originData.total = res.total;
  }).finally(() => {
    originData.loading = false
  })
};

let currentChange = () => {
  filtersRef.value.onSubmit();
}

onMounted(() => {
  filtersRef.value.onSubmit();
});
</script>

<style scoped lang="scss">
.el-card {
  height: 100%;
  .el-card__body {
    height: 100%;
  }
}
</style>
